<!doctype html>
<html>
<head>
	<title>Inferno Form example</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		.form {
			min-width: 400px;
			margin: 20px;
			overflow: hidden;
			border: 1px solid #999;
			background: #eee;
			padding: 20px;
			font-family: Arial;
		}
		.form-group {
			display: block;
			overflow: hidden;
			position: relative;
			margin-bottom: 20px;
		}
		.form-group label {
			display: block;
			font-size: 16px;
			color: #444;
			margin-bottom: 5px;
		}
		.form-group input {
			display: block;
			margin-top: 5px;
			font-size: 14px;
			padding: 5px;
		}
		.form-group .inline input {
			display: inline-block;
			margin-right: 10px;
		}
	</style>
</head>
<body>
	<div id="app"></div>
	<script src="../../packages/inferno/dist/inferno.js"></script>
	<script src="../../packages/inferno-hyperscript/dist/inferno-hyperscript.js"></script>
	<script>
		var h = Inferno.h;

		let firstName = 'Dominic';
		let lastName = null;
		let age = 28;
		let description = null;

		// special input values
		let id = 'test';
    let testValue = 11;
    function changeTestValue(event) {
      testValue = event.target.value;

      console.log(event.type, testValue);

      render();
		}

		function linkedTextHandler(data, e) {
			const val = e.target.value;

			firstName = val;
			render()
		}

		function textHandler(e) {
			const val = e.target.value;

			lastName = val;
			render()
		}

		function numberHandler(e) {
			const val = e.target.value;

			age = val;
			render()
		}

		function descHandler(e) {
			const val = e.target.value;

			description = val;
			render()
		}

		function handleToggle(e) {
			console.log('Checkbox clicked!')
		}

		function render() {
			Inferno.render(h('form.form', [
				h('div.form-group', [
					h('label', 'Please enter your first name name:'),
					h('input', {
						type: 'text',
						placeholder: 'Joe',
						value: firstName,
						onInput: Inferno.linkEvent({data: '123'}, linkedTextHandler)
					})
				]),
				h('div.form-group', [
					h('label', 'Please enter your first last name:'),
					h('input', {
						type: 'text',
						placeholder: 'Bloggs',
						defaultValue: 'Gannaway',
						onInput: textHandler
					})
				]),
				h('div.form-group', [
					h('label', 'Please enter your age:'),
					h('input', { type: 'number', value: age, min: 0, max: 99, onInput: numberHandler })
				]),
				h('div.form-group', [
					h('label', 'What is your favourite food:'),
					h('div.inline', [
						h('input', { type: 'radio', name: 'food', defaultChecked: false, onClick: handleToggle }),
						h('span', 'Pizza')
					]),
					h('div.inline', [
						h('input', { type: 'radio', name: 'food', defaultChecked: true, onClick: handleToggle }),
						h('span', 'Pasta')
					])
				]),
				h('div.form-group', [
					h('label', 'Please enter your location:'),
					h('select', { value: 'United Kingdom' }, [
						h('option', { selected: false }, 'United States'),
						h('option', { selected: true }, 'United Kingdom'),
						h('option', { selected: false }, 'France')
					])
				]),
				h('div.form-group', [
					h('label', 'Please enter a description:'),
					h('textarea', {
						defaultValue: 'I don\'t know?',
						value: description,
						onInput: descHandler
					})
				]),
        h('div.form-group', [
          h('label', 'Color picker (html5):'),
          h('input', { type: 'color' })
        ]),
				h('label', {'for': 'test'}, [
				    'Label',
					h('input#test', {
            id: id,
            name: id,
            value: testValue,
            onChange: changeTestValue,
						onInput: changeTestValue,
						onKeyup: changeTestValue,
						type: 'number',
						pattern: '[0-9]+([,\.][0-9]+)?',
						inputMode: 'numeric',
						min: 10,
					})]
				)
			]), document.getElementById('app'));
		}
		render();
	</script>
</body>
</html>
